<template>
    <div class="contianer">
        <!-- 菜单背景色 -->
        <div class="headerBgc">
        <!-- 二级菜单栏头部 -->
            <div class="activityHeader">
            <!-- 菜单栏左边 -->
                <div class="headerLeft">
                    
                    <el-tabs v-model="activityCity">
                    <el-tab-pane label="热门活动" name="first"></el-tab-pane>
                    <el-tab-pane label="北京" name="second"></el-tab-pane>
                    <el-tab-pane label="上海" name="third"></el-tab-pane>
                    <el-tab-pane label="广州" name="fourth"></el-tab-pane>
                    <el-tab-pane label="深圳" name="fifth"></el-tab-pane>
                    <el-tab-pane label="杭州"></el-tab-pane>
                    </el-tabs>
                    <!-- 下拉菜单 -->
                    <div class="headerDropdown">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                其他<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>成都</el-dropdown-item>
                                <el-dropdown-item>重庆</el-dropdown-item>
                                <el-dropdown-item disabled>福州</el-dropdown-item>
                                <el-dropdown-item divided>其余全部</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <!-- 菜单右边 -->
                <div class="headerRight">
                    <a href="https://wj.qq.com/s2/5663550/9f9f/" target="_blank">
                    <i class="el-icon-s-cooperation"></i>
                    活动合作
                    </a>
                </div>
                
            </div>
        </div>
        <!-- 主体部分 -->
    <div class="activityContainer">
                <!-- 轮播图 -->
        <div class="bannerBlock">
            <el-carousel>
            <el-carousel-item v-for="item in lunbotulist" :key="item.id" tag="el-carousel-item">
                <a :href="item.url">
                <h3 class="small">
                <img :src="item.img_url" alt="">
                </h3>
                </a>
            </el-carousel-item>
            </el-carousel>
          
            <div class="calendar">
            </div>
        </div>
        <div class="activitybody">
            <a :href="item.url" class="activityItem" v-for="(item,i) in activitylist" :key="i" target="_blank">
                <div>
                    <img :src="item.img_url" alt="">
                    <h1 class="activityItemTitle">{{item.title}}</h1>
                    
                </div>
                <div class="activityItemBottom">
                    <div>
                        <span>
                            <i class="el-icon-date"></i>
                            {{item.date}}
                        </span>
                        <span>
                            <i class='el-icon-location'></i>
                            不限
                        </span>
                    </div>
                    <div class="activityItemButton">报名参加</div>
                </div>
            </a>
        </div>
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total" background>
        </el-pagination>
        
    </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            lunbotulist:[
              {id:1,img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo',url:""},
              {id:2,img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo',url:""},
              {id:3,img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo',url:""},
            ],
            activitylist:[
                // {title:'【直播】OSC源创会第87期',date:'03-18 周三',
                // url:'http://ossh5.rockstudio.cn/Elastic/minisite/detailact.html?id=6&refer=do',
                // img_url:'https://user-gold-cdn.xitu.io/1583377076136483993451244f5c95cd2cda73297cc40.jpg?imageView2/1/w/940/h/560/q/85/format/webp/interlace/1'},
                {title:'产品【特种兵】线上训练营',date:'03-18 周三',
                url:'http://www.huodongxing.com/event/4533718524421',
                img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo'},
                {title:'手把手教你接口测试——极光开发者线上沙龙',date:'03-19 周四',
                url:'http://www.huodongxing.com/event/1535025610800?qd=juejin',
                img_url:'http://wimg.huodongxing.com/logo/202003/1535025610800/283715456283300_v2.jpg@!wmlogo'},
                {title:'TiD阿里妈妈智能化质量保障',date:'03-19 周四',
                img_url:'http://wimg.huodongxing.com/logo/202003/4536042049000/343722611236597_v2.jpg@!wmlogo'},
                {title:'使用 Elastic Stack 实现集中式日志管理入门',date:'03-25 周三',
                img_url:'http://elastic.rockstudio.cn/upload/2020/02/15826812934b30531a1af90e63.png'},
                // {title:'SOFAChannel#13：云原生网络代理 MOSN 的多协议机制解析',date:'03-26 周四',
                // img_url:'https://user-gold-cdn.xitu.io/15831494137650fa48e4f64bf84c4ddf0159e68c6cc23.jpg?imageView2/1/w/940/h/560/q/85/format/webp/interlace/1'},
                //
                // {title:'【直播】OSC源创会第87期',date:'03-18 周三',
                // url:'http://ossh5.rockstudio.cn/Elastic/minisite/detailact.html?id=6&refer=do',
                // img_url:'https://user-gold-cdn.xitu.io/1583377076136483993451244f5c95cd2cda73297cc40.jpg?imageView2/1/w/940/h/560/q/85/format/webp/interlace/1'},
                {title:'产品【特种兵】线上训练营',date:'03-18 周三',
                url:'http://www.huodongxing.com/event/4533718524421',
                img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo'},
                {title:'手把手教你接口测试——极光开发者线上沙龙',date:'03-19 周四',
                url:'http://www.huodongxing.com/event/1535025610800?qd=juejin',
                img_url:'http://wimg.huodongxing.com/logo/202003/1535025610800/283715456283300_v2.jpg@!wmlogo'},
                {title:'TiD阿里妈妈智能化质量保障',date:'03-19 周四',
                img_url:'http://wimg.huodongxing.com/logo/202003/4536042049000/343722611236597_v2.jpg@!wmlogo'},
                {title:'使用 Elastic Stack 实现集中式日志管理入门',date:'03-25 周三',
                img_url:'http://elastic.rockstudio.cn/upload/2020/02/15826812934b30531a1af90e63.png'},

                {title:'产品【特种兵】线上训练营',date:'03-18 周三',
                url:'http://www.huodongxing.com/event/4533718524421',
                img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo'},
                {title:'手把手教你接口测试——极光开发者线上沙龙',date:'03-19 周四',
                url:'http://www.huodongxing.com/event/1535025610800?qd=juejin',
                img_url:'http://wimg.huodongxing.com/logo/202003/1535025610800/283715456283300_v2.jpg@!wmlogo'},
                {title:'TiD阿里妈妈智能化质量保障',date:'03-19 周四',
                img_url:'http://wimg.huodongxing.com/logo/202003/4536042049000/343722611236597_v2.jpg@!wmlogo'},
                {title:'使用 Elastic Stack 实现集中式日志管理入门',date:'03-25 周三',
                img_url:'http://elastic.rockstudio.cn/upload/2020/02/15826812934b30531a1af90e63.png'},

                {title:'产品【特种兵】线上训练营',date:'03-18 周三',
                url:'http://www.huodongxing.com/event/4533718524421',
                img_url:'http://wimg.huodongxing.com/logo/202002/4533718524421/753722719407312_v2.jpg@!wmlogo'},
                {title:'手把手教你接口测试——极光开发者线上沙龙',date:'03-19 周四',
                url:'http://www.huodongxing.com/event/1535025610800?qd=juejin',
                img_url:'http://wimg.huodongxing.com/logo/202003/1535025610800/283715456283300_v2.jpg@!wmlogo'},
                {title:'TiD阿里妈妈智能化质量保障',date:'03-19 周四',
                img_url:'http://wimg.huodongxing.com/logo/202003/4536042049000/343722611236597_v2.jpg@!wmlogo'},
                {title:'使用 Elastic Stack 实现集中式日志管理入门',date:'03-25 周三',
                img_url:'http://elastic.rockstudio.cn/upload/2020/02/15826812934b30531a1af90e63.png'},
            ],
            activityCity:'',
            //页数
            pageSize: 12,
            total: 60,
            currentPage:1,
        }
    },
    methods:{

    }
}
</script>
<style scoped>
    .contianer{
        background-color: #eee;
    }
    .headerBgc{
        background-color: #fff;
        position: sticky;
        top: 62px;
        z-index: 2;
    }
    .activityHeader{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        width: 960px;
        align-items: center;
    }
    .headerLeft{
        display: flex;
        align-items: center;
        /* width: 300px; */
        
    }
    .el-tabs{
        width: 400px;
        font-size: 12px !important;
    }
    .headerDropdown{
        margin:0 0 15px 30px;
    }
    .headerRight{
        font-size: 14px;
        color: #7f7f7f;
    }
    .headerRight a{
        text-decoration: none;
        color: #7f7f7f;
    }
    .headerRight a:hover{
        text-decoration: none;
        color: blue;
    }
    .activityContainer{
        position: relative;
        width: 960px;
        left: 50%;
        transform: translateX(-50%);
    }
      .bannerBlock{
    display: flex;
    justify-content: space-between;
    /* border: green 1px solid; */
    margin-top: 20px;
  }
  .el-carousel{
  width: 470px;
  border-radius: 8px;
    }
    .el-carousel img{
    width: 470px;
    height: 285px;
    border-radius: 8px;    
    }
  .calendar{
    width:475px;
    height: 300px;
    margin-left: 20px;
  }
  .activitybody{
      display: flex;
      flex-wrap: wrap;
      width: 990px;
  }
  .activityItem{
      width: 230px;
      height: 263px;
      box-shadow: 0 1px 1px #999;
      background-color: #fff;
      text-decoration: none;
      margin-top: 25px;
      transition: ease 0.5s;
      margin-right: 14px;
  }
  .activityItem:hover{
      box-shadow: 1px 1px 8px #999;
      transform: translateY(-8px);
  }
  .activityItem img{
      width: 230px;
    height: 135px;
  }
  .activityItemTitle{
      font-size: 14px;
      font-weight: bold;
      margin: 20px 10px 0 10px;
      color: #333;
      height: 35px;
      overflow: hidden;
  }
  .activityItemBottom{
      display: flex;
      justify-content: space-between;
      position: relative;
      bottom: 0;
      margin: 0  10px 7px 10px;
      height: 48px;
      /* border: #7f7f7f 1px solid; */
  }
  .activityItemBottom div{
      display: flex;
      flex-direction: column;
      font-size: 12px;
  }
  .activityItemBottom div span{
      margin-bottom: 7px;
      color: #333;
  }
  .activityItemButton{
      position: relative;;
      right: 2px;
      top: 25px;
      background-color:#4D91FD;
      width: 100px;
      height: 24px;
      text-align: center;
      border-radius: 12px;
      font-size: 12px;
      vertical-align: middle;
      color: #fff;
  }
  .el-pagination{
      margin: 10px 0;
      text-align: center;
  }
</style>